<template>
	<div class="container" ref="big">
		<main>
			<i class="iconfont icon-baitian" @click="change" ref="icon"></i>
			<Header v-model="searchWord"></Header>
			<Definition :searchWord="searchWord"></Definition>
		</main>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import Header from './components/Header.vue';
import Definition from './components/Definition.vue';

const searchWord = ref();
// ref对象
let big = ref();
let icon = ref();

// 黑白模式切换
function change() {
	big.value.classList.toggle('day');
	console.log();
	icon.value.classList.value.indexOf('baitian') !== -1
		? (icon.value.classList.value = 'iconfont icon-yewan1')
		: (icon.value.classList.value = 'iconfont icon-baitian');
}
</script>

<style scoped lang="less">
.container {
	height: 100vh;
	overflow: hidden;
	background-color: #282c34;
	color: #fff;
	main {
		display: flex;

		flex-direction: column;
		padding: 1rem;
		max-width: 1000px;
		margin: 0 auto;
		i {
			// display: inline-block;
			font-size: 20px;
			position: absolute;
			top: 40px;
			left: 40px;
		}
	}
}
.day {
	color: #000;
	background-color: #fff;
	/deep/ input {
		background-color: #fff;
		color: #000;
		&:focus {
			border-bottom: 1px solid #000;
		}
	}
	/deep/ ::-webkit-scrollbar {
		background-color: #fff;
	}
	/deep/.definitions {
		border-color: #ccc;
		color: #000;
		div.meaning {
			.partOfSpeech {
				background-color: #fff !important;
			}
		}
	}
}
</style>
